<template>
    <div class="TestManager">

        <div class="nav">
            <el-input v-model="input" placeholder="请输入试卷名称" style="width: 250px; margin-top: 15px;" clearable
                @keyup.enter.native="handleQuery">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer; height: 10px;"
                    @click="handleQuery"></i>
            </el-input>
        </div>


        <div class="tab">
            <el-table style=" width: 95%; padding-top: 15px;" :data="tableData" stripe class="tableBox">

                <el-table-column align="center" type="index" width="50"></el-table-column>
                <el-table-column align="center" prop="examname" label="试卷名称" width="150"></el-table-column>
                <el-table-column align="center" prop="teachername" label="发布教师" width="150"></el-table-column>
                <el-table-column align="center" prop="status" label="试卷状态" width="120">
                    <template slot-scope="scope" align="center">
                        <span>{{ scope.row.status == '0' ? '未发布' : '已发布' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label=" 操作" width="400" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" class="blueBug" @click="check(scope.row)">
                            查看
                        </el-button>
                        <el-button type="primary" size="mini" class="blueBug" @click="statusHandle(scope.row)">
                            {{ scope.row.status == '0' ? '发布' : '下架' }}
                        </el-button>
                        <el-button type="danger" size="mini" class="delBut non" @click="deleteHandle(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination class="pageList" :page-sizes="[4, 8, 12, 16]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>




        <el-dialog :title=mytitle :visible.sync="dialogVisible1" width="30%" :fullscreen=full>
            <div class="xiti">
                <h1
                    style="height: 40px; background-color: rgb(38, 135, 209); font-size: 25px; text-align: center; border-radius: 10px; width: 300px; align-self: center; line-height: 40px;">
                    总分：{{
                        total }}</h1>

                <div class=" questOne" v-for="(item, index) in    question    " :key="index">
                    <h3 style="margin-bottom: 10px; margin-top: 10px;">{{ index + 1 }} 、{{ item.topic }}----------({{
                        item.score }}分 )
                    </h3>
                    <el-radio v-model="radio" :label="item.optiona"
                        @change="checkOption(item.optiona, item.answer, item.score, item.status, index)">A、 {{
                            item.optiona
                        }}</el-radio>
                    <el-radio v-model="radio" :label="item.optionb"
                        @change="checkOption(item.optionb, item.answer, item.score, item.status, index)">B、 {{
                            item.optionb }}</el-radio>
                    <el-radio v-model="radio" :label="item.optionc"
                        @change="checkOption(item.optionc, item.answer, item.score, item.status, index)">C、 {{
                            item.optionc }}</el-radio>
                    <el-radio style="margin-bottom: 10px;" v-model="radio" :label="item.optiond"
                        @change="checkOption(item.optiond, item.answer, item.score, item.status, index)">D、 {{
                            item.optiond }}</el-radio>
                    <span v-show="item.status === true">已完成</span>
                    <span v-show="item.status === false">未完成</span>
                    <br />
                    <span>答案：</span>
                    <span>{{ item.answer }}</span>
                    <hr />
                </div>
            </div>
        </el-dialog>




    </div>
</template>

<script>
export default {
    name: 'TestManager',
    data() {
        return {
            input: "",
            //总数据条数
            counts: 0,
            //当前页
            page: 1,
            //每页条数
            pageSize: 4,
            // 表格数据
            tableData: [],
            mytitle: "",
            exam: {
                examname: "",
                id: "",
            },
            dialogVisible: false,
            dialogVisible1: false,
            full: true,
            question: [],
            radio: "",
            total: 0,

        }
    },
    methods: {
        //输入框查询
        handleQuery() {
            this.getTableData();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTableData();
        },
        check(val) {
            this.mytitle = val.examname;
            this.dialogVisible1 = true;
            this.exam.id = val.id;
            this.getExam();

        },
        getExam() {
            this.axios.get("/choicequestion/list/" + this.exam.id)
                .then(res => {
                    this.question = res.data;
                    this.question.forEach(el => { el.status = false })
                    console.log(this.question);
                })

        },
        checkOption(option, answer, score, status, index) {
            console.log("sdasdasd");
            if (option === answer) {
                this.total += score;
            } else {
                this.total += 0;
            }
            this.question[index].status = true;


        },

        statusHandle(value) {
            if (value.status === 0) {
                value.status = 1;
            } else {
                value.status = 0;
            }
            this.axios.post("/examination/update", value)
                .then(res => {
                    if (res.data === "success") {
                        this.$message({
                            type: "success",
                            message: "修改成功",
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "修改失败",
                        })
                    }
                    this.getTableData();
                })
        },
        deleteHandle(val) {
            this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete("/examination/delete/" + val)
                    .then(res => {
                        if (res.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        this.getTableData();
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        getTableData() {
            const params = {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input,
                }
            }
            this.axios.get("/examination/page", params)
                .then(res => {
                    this.counts = res.data.total;
                    this.tableData = res.data.records;
                    console.log(this.tableData);
                })
        },
        //提交数据
        submit() {
            //却所有的空格
            this.exam.examname = this.exam.examname.replace(/\s*/g, "");
            if (this.mytitle === "添加试卷") {
                this.axios.post("/teacher/saveexam", this.exam)
                    .then(res => {
                        if (res.data === "success") {
                            this.$notify({
                                showClose: true,
                                message: "添加试卷成功",
                                type: 'success',
                                duration: 1000
                            })
                        }
                        else if (res.data === "exist") {
                            this.$notify({
                                showClose: true,
                                message: "试卷名重复",
                                type: 'error',
                                duration: 1000
                            })
                        } else {
                            this.$notify({
                                showClose: true,
                                message: "添加失败",
                                type: 'error',
                                duration: 1000
                            })
                        }
                        this.getTableData();
                    })
                this.dialogVisible = false
            } else {
                console.log("gengixn", this.exam);
                this.axios.post("/teacher/examination/update", this.exam)
                    .then(res => {
                        if (res.data === "success") {
                            this.$message({
                                type: "success",
                                message: "修改成功",
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: "修改失败",
                            })
                        }
                        this.dialogVisible = false;
                        this.getTableData();
                    })
            }
        }

    },
    mounted() {
        this.getTableData();
    }
}

</script>
<style scoped>
@font-face {
    font-family: "mmmm";
    src: url(../../font/也字工厂喵喵体.ttf);
}

.TestManager {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}

.nav {
    width: 60%;
    height: 10%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);
}

.nav .el-button {
    width: 170px;
    height: 50px;
    font-size: 18px;
    background: #fff;
    border: none;
    border-radius: 50px;
    font-family: mmmm;
    font-weight: 500;
    color: #000;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
}

.nav .el-button:hover {
    background-color: rgba(29, 201, 160, 0.08);
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(-5px) scale(1.05);
}

.nav .el-button:active {
    background-color: transparent;
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(5px) scale(0.95);
}

.nav .el-button:disabled {
    background-color: rgba(255, 255, 255, 0.16);
    color: #8E8E93;
    border-color: #8E8E93;
}

.tab {
    width: 70%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);

}

.tab>>>.el-table tr {
    background-color: transparent;
}

.tab>>>.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: transparent;
}

.tab>>>.el-table th.el-table__cell {
    background-color: transparent;
}

.tableBox {
    background-color: transparent;
}

.pageList {
    margin-top: 10px;
    text-align: center;
}

.pageList>>>.el-pager li {
    background-color: transparent;
}

.xiti {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.questOne {
    width: 100%;
    padding-left: 10px;
}

.questOne>>>.el-radio__input {
    display: none !important;
}
</style>